<template>
  <div class="my-detail my-wbox" v-loading="loading">
    <el-select v-model="dateString" placeholder="请选择" :disabled="loading" @change="onChange">
      <el-option :label="v" :value="v" v-for="v in dateList" :index="v" size="large" />
    </el-select>
    <h3><i></i>户主信息</h3>
    <ul>
      <li>户主姓名：<span>{{ detail.info.name }}</span></li>
      <li>是否租户：<span>{{ detail.info.tenantFlag == 1 ? '是' : '否' }}</span></li>
      <li>常驻地址：<span>{{ detail.info.townName }}{{ detail.info.countryName }}{{ detail.info.groupName }}</span></li>
      <li>联系电话：<span>{{ detail.info.phone }}</span></li>
      <li>出生日期：<span>{{ detail.info.birthday }}</span></li>
    </ul>
    <h3><i></i>户主防疫情况</h3>
    <ul>
      <!-- ，0-无，1-绿码；2-黄码；3-红码 -->
      <li>健康码状况：
        <span v-if="detail.holder.healthCode == 0" class="c-color0">无</span>
        <span v-if="detail.holder.healthCode == 1" class="c-color1">绿码</span>
        <span v-if="detail.holder.healthCode == 2" class="c-color2">黄码</span>
        <span v-if="detail.holder.healthCode == 3" class="c-color3">红码</span>
      </li>
      <!-- ，0-没打针；1-第一针；2-第二针；3-第三针 -->
      <li>
        疫苗接种情况：<span>{{
            detail.holder.inoculate == 3 ? '第三针' : detail.holder.inoculate == 2 ? '第二针' :
              detail.holder.inoculate == 1 ? '第一针' : detail.holder.inoculate == 0 ? '没打针' : '--'
        }}</span>
      </li>
      <!-- ，0-无核酸；1-24小时内；2-48小时内；3-7日内；4-7日外 -->
      <li>
        核酸检测情况：<span>{{
            detail.holder.acidTest == 4 ? '7日外' : detail.holder.acidTest == 3 ? '7日内' : detail.holder.acidTest
              == 2 ? '48小时内' : detail.holder.acidTest == 1 ? '24小时内' : detail.holder.acidTest == 0 ? '无核酸' : '--'
        }}</span>
      </li>
      <li class="one">备注：<span>{{ detail.holder.epidemicRemark }}</span></li>
    </ul>
    <h3><i></i>户主安全情况</h3>
    <ul>
      <!--  2-在家，3-外出务工，4-外出学习 -->
      <li>
        外出状态：<span>{{
            detail.holder.outWorker == 2 ? '在家' : detail.holder.outWorker == 3 ? '外出务工' : detail.holder.outWorker
              == 4 ? '外出学习' : '--'
        }}</span>
      </li>
      <!--  0-不是；1-聋；2-哑；3-智障；4-精神病人；5-行动不便 -->
      <li>
        是否特殊人群：<span>{{
            detail.holder.specialMan == 0 ? '否' : detail.holder.specialMan == 1 ? '聋' :
              detail.holder.specialMan == 2 ? '哑' : detail.holder.specialMan == 3 ? '智障' : detail.holder.specialMan == 4 ?
                '精神病人' : detail.holder.specialMan == 5 ? '行动不便' : '--'
        }}</span>
      </li>
    </ul>
    <h3 v-if="detail.holder?.vehicleList?.length > 0"><i></i>户主车辆信息</h3>
    <ul v-for="v in detail.holder.vehicleList">
      <!-- ，1-摩托车；2-轿车；3-大货车；4-电动车；5-三轮车 -->
      <li>
        车辆类型：<span>{{
            v.vehicleType == 1 ? '摩托车' : v.vehicleType == 2 ? '轿车' : v.vehicleType == 3 ? '大货车' : v.vehicleType
              == 4 ? '电动车' : v.vehicleType == 5 ? '三轮车' : '--'
        }}</span>
      </li>
      <li>驾照：<span>{{ v.drivingLicense }}</span></li>
      <li>牌照：<span>{{ v.licensePlate }}</span></li>
    </ul>
    <h3 v-if="detail.memberList.length > 0"><i></i>家庭成员信息</h3>
    <div v-for="item in detail.memberList" class="my-detail__user">
      <h4>成员信息</h4>
      <ul>
        <li>成员姓名：<span>{{ item.name }}</span></li>
        <li>联系电话：<span>{{ item.phone }}</span></li>
      </ul>
      <h4>成员防疫情况</h4>
      <ul>
        <!-- ，0-无，1-绿码；2-黄码；3-红码 -->
        <li>健康码状况：
          <span v-if="item.healthCode == 0" class="c-color0">无</span>
          <span v-if="item.healthCode == 1" class="c-color1">绿码</span>
          <span v-if="item.healthCode == 2" class="c-color2">黄码</span>
          <span v-if="item.healthCode == 3" class="c-color3">红码</span>
        </li>
        <!-- ，0-没打针；1-第一针；2-第二针；3-第三针 -->
        <li>
          疫苗接种情况：<span>{{
              item.inoculate == 3 ? '第三针' : item.inoculate == 2 ? '第二针' :
                item.inoculate == 1 ? '第一针' : item.inoculate == 0 ? '没打针' : '--'
          }}</span>
        </li>
        <!-- ，0-无核酸；1-24小时内；2-48小时内；3-7日内；4-7日外 -->
        <li>
          核酸检测情况：<span>{{
              item.acidTest == 4 ? '7日外' : item.acidTest == 3 ? '7日内' : item.acidTest
                == 2 ? '48小时内' : item.acidTest == 1 ? '24小时内' : item.acidTest == 0 ? '无核酸' : '--'
          }}</span>
        </li>
      </ul>
      <h4>成员安全情况</h4>
      <ul>
        <!--  2-在家，3-外出务工，4-外出学习 -->
        <li>
          外出状态：<span>{{
              item.outWorker == 2 ? '在家' : item.outWorker == 3 ? '外出务工' :
                item.outWorker == 4 ? '外出学习' : '--'
          }}</span>
        </li>
        <!--  0-不是；1-聋；2-哑；3-智障；4-精神病人；5-行动不便 -->
        <li>
          是否特殊人群：<span>{{
              item.specialMan == 0 ? '不是' : item.specialMan == 1 ? '聋' :
                item.specialMan == 2 ? '哑' : item.specialMan == 3 ? '智障' : item.specialMan == 4
                  ? '精神病人' : item.specialMan == 5 ? '行动不便' : '--'
          }}</span>
        </li>
      </ul>
      <h4 v-if="item?.vehicleList?.length > 0">成员车辆信息</h4>
      <ul v-for="v in item.vehicleList">
        <!-- ，1-摩托车；2-轿车；3-大货车；4-电动车；5-三轮车 -->
        <li>
          车辆类型：<span>{{
              v.vehicleType == 1 ? '摩托车' : v.vehicleType == 2 ? '轿车' : v.vehicleType == 3 ? '大货车' : v.vehicleType
                == 4 ? '电动车' : v.vehicleType == 5 ? '三轮车' : '--'
          }}</span>
        </li>
        <li>驾照：<span>{{ v.drivingLicense }}</span></li>
        <li>牌照：<span>{{ v.licensePlate }}</span></li>
      </ul>
    </div>
    <ul>
      <li class="one">防疫宣传内容：<span>{{ detail.info.epidemicContent }}</span></li>
      <li class="one">安全生产宣传内容：<span>{{ detail.info.safeContent }}</span></li>
    </ul>
    <h3 v-if="detail.homeImg.length > 0"><i></i>入户照片</h3>
    <div class="my-detail__img">
      <el-image v-for="(item, index) in detail.homeImg" :initial-index="index" :src="item"
        :preview-src-list="detail.homeImg" fit="cover" />
    </div>
    <el-button @click="onCancel" size="large">返回</el-button>
  </div>
</template>
<script setup lang='ts'>
import { ref, reactive, pushScopeId } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { DateListParams, DetailParams } from '@/views/family/interface/interface'
import { dateListApi, detailApi } from '@/views/family/api/familyApi'
const route = useRoute()
const router = useRouter()
const name = route.query.name as string
const phone = route.query.phone as string
// 下拉时间选择
const loading = ref<boolean>(false)
const dateList = ref<string[]>([])
const dateString = ref<string>('')
let detail = reactive<any>({
  info: {},//家庭信息
  memberList: [],//成员信息
  holder: {},//户主信息
  homeImg: [],//入户照片
})
//取消
const onCancel = () => {
  router.go(-1)
}
//户主信息
const onDateList = async (params: DateListParams) => {
  loading.value = true
  try {
    let res = await dateListApi(params)
    if (res?.code == 0 && res?.data?.length > 0) {
      dateList.value = res.data
      dateString.value = res.data[0]
      onChange()
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
const params = {
  name: name,
  phone: phone
}
onDateList(params)
//时间变化
const onChange = () => {
  let params = {
    name: name,
    phone: phone,
    dateString: dateString.value
  }
  onDetail(params)
}
//获取详情
const onDetail = async (params: DetailParams) => {
  loading.value = true
  try {
    let res = await detailApi(params)
    if (res?.code == 0) {
      detail.info = res.data
      detail.homeImg = res.data.homeImg ? res.data.homeImg.split(',') : []
      let arr: any[] = []
      if (res.data?.memberResponseList?.length > 0) {
        res.data.memberResponseList.forEach((t: any) => {
          if (t.houseHolderFlag == 1) {
            //户主
            detail.holder = t
          } else {
            arr.push(t)
          }
        })
      }
      detail.memberList = arr
    }
    loading.value = false
  } catch {
    loading.value = false
  }
}
</script>
<style scoped lang='scss'>
.my-detail {
  h3 {
    font-size: 16px;
    line-height: 20px;
    font-weight: bold;
    margin-top: 20px;
    display: flex;
    align-items: center;
    >i{
      display: block;
      width: 4px;
      height: 14px;
      border-radius: 2px;
      background: $color-primary;
      margin:0 10px 1px 0;
    }
  }

  &__img {
    margin: 20px 0;

    .el-image {
      width: 100px;
      height: 100px;
      margin: 0 10px 10px 0;
    }
  }

  h4 {
    font-size: 14px;
    font-weight: bold;
    margin-top: 10px;
  }

  ul {
    overflow: hidden;
    margin-top: 10px;
    font-size: 14px;

    >li {
      float: left;
      width: 30%;
      margin-bottom: 10px;
      color: #999;
      >span{
        color: #333;
      }
    }

    >li.one {
      width: 100%;
    }
  }
  &__user{
    border: 1px solid $my-color-border;
    border-radius: 8px;
    padding: 10px 20px;
    margin-top: 16px;
  }
}
</style>